<template>
  <div id="FrontPage">
    <div id="middle-nav">
      <ul>
        <li>全部</li>
        <li>首页</li>
        <li>说说</li>
      </ul>
    </div>
    <div id="content">
      <ul>
        <li v-for="(item,index) in getDataArr" :key="item.id">
          <div id="autorinfo">
            <span><img :src="item.headimg" alt="" id="userimg"></span>
            <div>
              <h3 id="name">{{item.autor}}</h3>
              <p id="time">{{item.time}}</p>
            </div>
          </div>
          <div id="mainbody">
            <p id="version"> {{item.content}} </p>
            <div id="imggroup" v-show="item.img">
        <li v-for="imgurl in item.img ">
          <img :src="imgurl" alt="">
        </li>
    </div>
  </div>
  <div id="footer">
    <span><i class="isActive" ref="ele" @click="likeClick(item.id,$event)"></i>{{likeNum(item.id,index)}}</span>
    <span @click="review(index)"><img src="../assets/images/reviewshow1.png" alt="" />{{reviewNum(item.id)}}</span>
    <div id="revColumn" v-show="revColumnShow == index">
      <ul>
        <li v-for="revitem in feelRevData" v-if="revitem.feelingid ==item.id">
          <span>{{revitem.autor}}</span>
          <span>:</span>
          <span>{{revitem.content}} </span>
          <span>{{revitem.time}}</span>
        </li>
      </ul>
      <div id="pubRev">
        <input type="text" id="revname" placeholder="评论人" v-model="feelData.feelName">
        <textarea id="revContent" placeholder="说点什么吧！！！" v-model="feelData.feelCon"></textarea>
        <button @click="publish(item.id)">发表评论</button>
      </div>
    </div>
  </div>
  </li>
  </ul>
  <!-- <div id="load">点击我加载更多</div> -->
  </div>

  </div>


</template>

<script>


  export default {
    name: "FrontPage",
    data() {
      return {
        getDataArr: [],
        feelRevData: [],
        imgData: "",
        likenum: [],
        revColumnShow: -1,
        feelData: {
          feelName: "",
          feelCon: "",
          time: "",
          feelingid: "",
        },

      }
    },
    computed: {
      //计算评论人数
      reviewNum() {
        return function (value) {
          var j = 0;
          var newArr = this.feelRevData;
          for (let i = 0; i < newArr.length; i++) {
            if (newArr[i].feelingid == value) {
              j++
            }
          }
          return j
        }
      },
      //计算点赞人数
      likeNum() {
        return function (value, Index) {
          let Arr = this.likenum;
          let uuid = localStorage.getItem("userUuid")
          let count = 0;
          //计算当前说说的点赞条数
          Arr.map((a) => {
            if (a.feelingid == value) {
              count++
            }
            return count
          })
          //判断该浏览器登录用户当前说说有没有点过赞
          if (Arr.length !== 0) {
            this.$nextTick(() => {
              let ff = this.$refs.ele
              // console.log(Arr)

              for (let i = 0; i < Arr.length; i++) {
                if (Arr[i].uuid == uuid) {
                  if (Arr[i].feelingid == value) {
                    ff[Index].className = "active"
                  }
                }
              }
            })
          }

          return count
        }
      },
    },
    methods: {
      review(i) {
        if (this.revColumnShow == i) {
          this.revColumnShow = -1;
        } else {
          this.revColumnShow = i
          console.log(this.revColumnShow)
        }
        // console.log(this.likenum)
      },
      //发表说说评论
      publish(feelingid) {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let time = year + "-" + month + "-" + day
        this.feelData.time = time;
        this.feelData.feelingid = feelingid;
        if (this.feelData.feelName !== "" && this.feelData.feelCon !== "") {
          fetch(process.env.VUE_APP_API_URL+"/feelReview", {
            method: 'post',
            body: JSON.stringify(this.feelData),
            headers: new Headers({
              'Content-Type': 'application/json'
            })
          })
            .then((res) => {
              return res.json()
              // console.log(res.json())
            })
            .then((data) => {
              if (data == "发布成功") {
                alert("发布成功!!!")
                Object.assign(this.$data.feelData, this.$options.data().feelData)
                this.$router.go(0)
              }
            })
            .catch((error) => { console.error('Error:', error) })

        } else {
          alert("请输入评论人和内容！！")
        }
      },
      //点赞
      likeClick(value, e) {
        let likeData = {
          "ifClick": false,
          "idNum": value,
          "useruuid": ""
        }
        likeData.useruuid = localStorage.getItem("userUuid")

        let ele = e.target
        let elepro = e.target.getAttribute("class");

        if (elepro == "isActive") {
          ele.setAttribute("class", "active");
          likeData.ifClick = true;
        } else {
          ele.setAttribute("class", "isActive");
          likeData.ifClick = false;
        }
        // console.log(likeData
        fetch(process.env.VUE_APP_API_URL+"/feelLike", {
          method: 'post',
          body: JSON.stringify(likeData),
          headers: new Headers({
            'Content-Type': 'application/json'
          })
        })
          .then((res) => {
            // console.log(res)
            return res.json()
          })
          .then((data) => {
            // console.log("/////"+data)
            this.getLike()
          })
          .catch((error) => { console.error('Error:', error) })

      },
      //请求点赞数据库
      getLike() {
        let uuid = localStorage.getItem("userUuid")
        let a = { "value": "true", "key": uuid };
        fetch(process.env.VUE_APP_API_URL+"/feelLikeNum", {
          method: 'post',
          body: JSON.stringify(a),
          headers: new Headers({
            'Content-Type': 'application/json'
          })
        })
          .then((res) => {
            return res.json()

          })
          .then((data) => {
            this.likenum = data
            console.log(data)


          })
          .catch((error) => { console.error('Error:', error) })
      },

    },
    //请求说说数据
    created() {
      fetch(process.env.VUE_APP_API_URL+"/FrontPage", {
        method: 'post',
        headers: new Headers({
          'Content-Type': 'application/x-www-form-urlencoded'
        })
      })
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          this.getDataArr = data.reverse();
          // console.log(this.getDataArr)
        })
        .catch((error) => { console.error('Error:', error) })
      //请求说说评论数据
      fetch(process.env.VUE_APP_API_URL+"/FrontPageRev", {
        method: 'post',
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      })
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          this.feelRevData = data
          // console.log(data)
        })
        .catch((error) => { console.error('Error:', error) })

      //请求点赞数据
      this.getLike()


    },

  }
</script>

<style scoped>
  #middle-nav {
    background-color: white;
    color: gray;
  }

  #middle-nav>ul {
    vertical-align: middle;
  }

  #middle-nav>ul>li {
    float: left;
    margin: 10px 0 10px 20px;

  }

  #content {
    width: 590px;
    height: 800px;
    margin-top: 5px;
    background-color: white;
    overflow: scroll;
    overflow-x: hidden;
  }

  #content ul {
    background-color: rgba(205, 208, 214, 0.5);
  }

  #content>ul>li {
    margin-bottom: 5px;
    /* border: 1px solid black; */
    background: white;
    display: inline-block;
  }


  #content ul>li div:last-child>span {
    margin-right: 30px;
  }

  #load {
    width: 590px;
    height: 40px;
    background-color: white;
    text-align: center;
    line-height: 40px;
  }

  #footer>span>img {
    width: 18px;
    height: 18px;
    margin-right: 2px;
    vertical-align: middle;
  }

  #autorinfo {
    display: flex;
    width: 100%;
    margin-left: 25px;
    padding-top: 5px;
  }

  #autorinfo>div {
    text-align: left;
  }

  #name {
    margin: 5px 0 0 10px;
  }

  #time {
    font-size: 5px;
    margin: 5px 0 0 10px;
  }

  #userimg {
    width: 50px;
    height: 50px;
    /* background: url(../assets/images/fan.png); */
    /* background-size: 50px 50px; */
    margin-top: 5px;

  }
  /* #userimg>img{
    width: 50px;
    height: 50px;
  } */

  #mainbody {
    width: 590px;
    margin-top: 10px;
    /* background: wheat; */
    /* text-align: center; */
  }

  #version {
    width: 550px;
    margin: 5px auto;
  }

  #imggroup {
    width: 550px;
    margin: 10px auto;
    /* border: 1px solid black; */
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
  }

  #imggroup>li {
    width: 100px;
    height: 100px;
    /* background: blue; */
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid rgb(154, 143, 143);

  }

  #imggroup>li>img {
    width: 100%;
    height: 100%;

  }

  #imggroup>li:last-child {
    margin-bottom: 5px;
  }

  #footer {
    background-color: rgb(123, 166, 196);
  }

  #footer>span {
    margin-left: 30px;
    cursor: pointer;
    margin-top: 5px;
    /* align-items: center; */
  }

  #footer>span>img {
    margin-bottom: 2px;
  }

  #footer>span>.isActive{
    display: inline-block;
    background: url("../assets/images/good.png");
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  #footer>span>.active {
    display: inline-block;
    background: url("../assets/images/redgood.png");
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  #revColumn {
    font-size: 10px;
    margin-top: 5px;
  }

  #revColumn>ul>li {
    border-top: grey 1px solid;
    width: 590px;
    display: flex;

  }

  #revColumn>ul>li:last-child {
    border-bottom: grey 1px solid;
  }

  #revColumn>ul>li>span:first-child {
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  #revColumn>ul>li>span:nth-child(2) {
    font-size: 16px;
  }

  #revColumn>ul>li>span:nth-child(3) {
    padding-left: 10px;
    padding-right: 10px;
    border-right: grey 1px solid;
    width: 360px;
  }

  #revColumn>ul>li>span:last-child {
    width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  #pubRev {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }

  #pubRev>#revname {
    height: 30px;
    width: 100px;
    margin-left: 10px;
  }

  #pubRev>#revContent {
    height: 30px;
    border-left: 1px solid grey;
    width: 370px;
    resize: none;
  }

  #pubRev>#revContent::placeholder {
    line-height: 30px;
  }

  #pubRev>input {
    border: none;

  }

  #pubRev>button {
    margin-left: 10px;
    width: 80px;
    height: 30px;
    background-color: rgb(50, 114, 225);
    border-radius: 6px;
    font-weight: bold;
    color: rgb(176, 173, 173);
  }
</style>